<template>
  <el-menu unique-opened :default-active="activeId">
    <el-sub-menu v-for="it in menus" :index="it.id">
      <template #title>
        <h3>{{ it.title }}</h3>
      </template>
      <el-menu-item
        v-for="child in it.children"
        :index="child.id"
        @click="handleClick"
      >
        <h3>{{ child.title }}</h3>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting
} from '@element-plus/icons-vue'
import { layoutHook } from '@/hooks/layout'
import { MenuItemRegistered } from 'element-plus'
const { menus, activeId } = layoutHook()
const router = useRouter()
const handleClick = (item: MenuItemRegistered) => {
  const { index } = item
  const [pidx, cidx] = index.split('-')
  const menuItem = menus.value[parseInt(pidx)].children[parseInt(cidx)]
  router.push(menuItem.href)
}
</script>
